import React, { useEffect, useState } from 'react';
import '../../styles/liu/signRecord.scss'
import { Button, Form, Input, Select, DatePicker, Table } from 'antd';
import {NavLink} from 'react-router-dom'
import { getSignRecordList } from '../../api/liu/index'
import Header from '../../components/liu/header'
interface Props {

}
function SignRecord(props: Props) {
    const { Option } = Select;
    const { RangePicker } = DatePicker;
    const { Search } = Input;
    const [data, setData] = useState([])
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    var [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 100 });
    //初始化加载
    useEffect(() => {
        getSignRecordList().then((res: any) => {
            setData(res.data)
        })
    }, [])
    //表单验证通过提交
    const onFinish = async (values: any) => {

    };
    //点击搜索
    const onSearch = (value: string) => {
        getSignRecordList().then((res: any) => {
            var arr = res.data.filter((item:any)=>{
                return item.name.indexOf(value)!=-1
            })
            setData(arr)
        })
    };
    //表格列数据
    const columns: any = [
        { title: '编号', dataIndex: 'id', },
        { title: '签约人姓名', dataIndex: 'name', },
        { title: '身份证号', dataIndex: 'id-num', },
        { title: '手机号码', dataIndex: 'phone', },
        { title: '签约医生团队', dataIndex: 'doctorTeam', },
        { title: '签约医生', dataIndex: 'doctor', },
        { title: '服务包', dataIndex: 'server', },
        {
            title: '签约状态',
            dataIndex: 'signPending',
            render: (signPending: string) => <span style={{ color: signPending === "生效中" ? "#2984f8" : '' || signPending === "已过期" ? "#888" : "" }}>{signPending}</span>
        },
        { title: '到期', dataIndex: 'date', },
        {
            title: '操作',
            render: (data:any) => {
                return (<>
                <NavLink to="/index/record-detail" state={data}>查看详情</NavLink>
                <NavLink to="/index/record-edit" state={data}>续约</NavLink>
                </>)
            }
        },
    ];
    const onSelectChange = (newSelectedRowKeys: any) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    //分页发生改变后执行,pagi是最新的页码数据,是个对象 current:1,pageSize:5,total:100 },拿到最新的对象再去发请求
    const handleChange = (pagi: any) => {
        setPagination(pagi) //更新页码
    }
    return (
        <div className='signrecord'>
            <div className="main">
                <Header txt="签约记录"></Header>
                <div className="inputbox">
                    <Form
                        name="basic"
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 20 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                    >

                        <div className='input-line'>
                            <div>
                                <Form.Item
                                    label="签约状态"
                                    name="state"
                                >
                                    <Select
                                        defaultValue={"请选择"}
                                        allowClear
                                    >
                                        <Option value="">请选择</Option>
                                        <Option value="待审核">待审核</Option>
                                        <Option value="待支付">待支付</Option>
                                        <Option value="已驳回">已驳回</Option>
                                    </Select>
                                </Form.Item>

                                <Form.Item
                                    label="签约机构"
                                    name="organization"
                                >
                                    <Select
                                        defaultValue={"请选择"}
                                        allowClear
                                    >
                                        <Option value="">请选择</Option>
                                        <Option value="罗西社区服务中心">罗西社区服务中心</Option>
                                        <Option value="天明社区服务中心">天明社区服务中心</Option>
                                        <Option value="民进社区服务中心">民进社区服务中心</Option>
                                    </Select>
                                </Form.Item>

                                <Form.Item
                                    label="医生团队"
                                    name="doctor"
                                >
                                    <Select
                                        defaultValue={"请选择"}
                                        allowClear
                                    >
                                        <Option value="">请选择</Option>
                                        <Option value="王皓团队">王皓团队</Option>
                                        <Option value="胡曼团队">胡曼团队</Option>
                                        <Option value="李维团队">李维团队</Option>
                                    </Select>
                                </Form.Item>
                            </div>

                            <Button>导出</Button>
                        </div>


                        <div className='input-line'>
                            <div>
                                <Form.Item
                                    label="服务包"
                                    name="server"
                                >
                                    <Select
                                        defaultValue={"请选择"}
                                        allowClear
                                    >
                                        <Option value="">请选择</Option>
                                        <Option value="基础包">基础包</Option>
                                        <Option value="老年人服务包">老年人服务包</Option>
                                        <Option value="慢性病护理包">慢性病护理包</Option>
                                    </Select>
                                </Form.Item>

                                <Form.Item
                                    label="选择日期"
                                    name="date"
                                    className='date'
                                >
                                    <RangePicker placeholder={["开始日期", "结束日期"]} />
                                </Form.Item>
                            </div>

                            <Search placeholder="请输入关键字" onSearch={onSearch} enterButton />
                        </div>
                    </Form>

                </div>

                <div className="table">
                    <Table columns={columns} size="small" dataSource={data} rowSelection={rowSelection} pagination={pagination} onChange={(pagi) => { handleChange(pagi) }} />
                </div>
            </div>

        </div>
    );
}

export default SignRecord;